<template>
  <div :style="{ width: `${this.$parent.width}px` }" class="x-tab-item" @click="handleClick">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'x-tab-item',
    props: {
      label: {
        default: Math.floor(Math.random() * 10000),
      },
    },
    methods: {
      handleClick() {
        // 获取当前点击的索引
        const index = this.$parent.$slots.default.findIndex(item => {
          return item.componentInstance.label === this.label
        })
        if (this.$parent.activeIndex !== index) {
          this.$parent.activeIndex = index
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .x-tab-item {
    z-index: 5;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
  }
</style>
